<html>
    <head>
        <title>Ajaxian RSS Bling: Dynamic RSS Reader</title>

        <link rel="stylesheet" type="text/css" href="rssbling.css"/>

        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRTRERdeAiwZ9EeJWta3L_JZVS0bOBTXlvjd3rDmZZuD-sIFvFhBmWo5_g"></script>
        <script type="text/javascript">
          google.load("feeds", "1");
        </script>

        <script type="text/javascript">
            var oldFeedDiv;
        
            var feeds = [
                { title: 'techno.blog',
                  feedUrl: 'http://almaer.com/blog/index.xml' },
                { title: 'Google Code',
                  feedUrl: 'http://code.google.com/feeds/updates.xml' },
                { title: 'Google Code Featured Projects',
                  feedUrl: 'http://code.google.com/feeds/featured.xml' },
                { title: 'Ajaxian',
                  feedUrl: 'http://ajaxian.com/feed' },
                { title: 'Ajax Cookbook',
                  feedUrl: 'http://ajaxcookbook.org/feed/' },
              ];
            }

            function loadFeeds() {
                showLoading();

                var feedContent = "";
                for (i = 0; i < feeds.length; i++) {
                    feedContent += '<div class="unselectedFeed" onclick="getFeed(this, ' + i + ')">' + feeds[i].title + '</div>';
                }

                document.getElementById('feedListContainer').innerHTML = feedContent;

                showNothing();
            }

            function getFeed(feedDiv, feedId) {
                showLoading();

                if (oldFeedDiv != null) oldFeedDiv.className = "unselectedFeed";
                oldFeedDiv = feedDiv;

                feedDiv.className = "selectedFeed";

                new google.feeds.Feed(feeds[feedId].feedUrl).load(function(result) {
                  if (!result.error) {
                    var html = "";                
                    var feed = result.feed;

                    html += '<div class="titlebar">';
                    html += '<div class="title"><a href="' + feed.link + '">' + feed.title + '</a></div>';
                    html += '<div class="description">' + feed.description + '</div>';
                    html += '</div><div class="entries">';

                    for (i = 0; i < result.feed.entries.length; i++) {
                      var entry = result.feed.entries[i];

                      html += '<div class="entryTitle"><a href="' + entry.link + '">' + entry.title + '</a></div>';
                      html += '<div class="entryText">' + entry.content + '</div>';
                    }

                    html += "</div>";
                    document.getElementById("feedContent").innerHTML = html;
                  }
                });
            }
            
            function showError() {
                var html = "";
                html += '<table width="100%" height="100%">';
                html += '<tr><td valign="middle" align="center" class="error">';
                html += 'An error occured';
                html += '</td></tr></table>';
                showSomething(html);
            }

            function showLoading() {
                var html = "";
                html += '<table width="100%" height="100%">';
                html += '<tr><td valign="middle" align="center" class="status">';
                html += 'Loading feeds...';
                html += '</td></tr></table>';
                showSomething(html);
            }

            function showNothing() {
                var html = "";
                html += '<table width="100%" height="100%">';
                html += '<tr><td valign="middle" align="center" class="status">';
                html += 'Click on a feed in the left sidebar...';
                html += '</td></tr></table>';
                showSomething(html);
            }

            function showSomething(html) {
                var feedContent = document.getElementById("feedContent");
                feedContent.innerHTML = html;
            }
        </script>
    </head>
    <body onload="loadFeeds()">
        <table width="100%" height="100%">
            <tr>
                <td colspan="3">
                    <h1>
                        Ajaxian RSS Bling: Dynamic RSS Reader
                    </h1>
                </tr>
            </tr>
            <tr>
                <td height="100%" id="feedList" width="200" valign="top">
                    <div id="feedListContainer">
                    </div>
                </td>
                <td id="feedMenuSpacer">
                </td>
                <td id="feedContent" valign="top">
                </td>
            </tr>
        </table>
    </body>
</html>
